<template>
	<view class="qilin-followList" :style="type=='personal'?'padding-top:0;':''">
		<scroll-view style="height:100%;" scroll-y @scroll="scrollList">
			<view class="qilin-followList-item" v-for="(item,index) in list" :key="item.id">
				<view class="qilin-followList-item-info">
					<view class="qilin-followList-item-info-name">
						<image src="../static/imgs/avator.jpg"></image>
						<text>{{item.author}}</text>
					</view>
					<view class="qilin-followList-item-info-manage">...</view>
				</view>
				<view class="qilin-followList-item-ownText">厄斐琉斯红白绿卡三刀，yyds
					<text>@年小年</text>
				</view>
				<view class="qilin-followList-item-video">
					<follow-player :src="item.src" ref="player" :index="index"></follow-player>
					<view class="qilin-followList-item-video-music">
						<icon class="iconfont icon-yinle"></icon>
						<view class="qilin-followList-item-video-music-text">
							<view>月老掉线。。。。。。</view>
						</view>
					</view>
				</view>
				<view class="qilin-followList-item-operate">
					<view class="qilin-followList-item-operate-time">08:21</view>
					<view class="qilin-followList-item-operate-items">
						<view class="qilin-followList-item-operate-items-icon">
							<icon class="iconfont icon-zhuanfa"></icon>
							<text>分享</text>
						</view>
						<view class="qilin-followList-item-operate-items-icon">
							<icon class="iconfont icon-pinglun"></icon>
							<text>评论</text>
						</view>
						<view class="qilin-followList-item-operate-items-icon">
							<icon class="iconfont icon-aixin"></icon>
							<text>赞</text>
						</view>
					</view>
				</view>
				<view class="qilin-follow-item-comment">
					<view class="qilin-follow-item-comment-number">{{item.loveNumber}} 人赞过</view>
					<view class="qilin-follow-item-comment-content"></view>
					<view class="qilin-follow-item-comment-input">
						<icon class="iconfont icon-bianji"></icon>
						<input type="text" placeholder="添加评论...">
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import FollowPlayer from "./followPlayer.vue";
	let Timer=null;
	export default {
		name:"followList",
		props:["list","type"],
		components:{
			FollowPlayer
		},
		data() {
			return {
				index:0
			};
		},
		watch:{
			index(nv,ov){
				for(let i in this.list){
					// console.log(i);
					if(Number(i) != this.index){
						this.$refs["player"][Number(i)].pause();
					}else{
						this.$refs["player"][Number(i)].play();
					};
				};
			}
		},
		methods:{
			//滚动页面时触发事件监听
			scrollList(e){
				// console.log(e.detail.scrollTop);
				clearTimeout(Timer);
				setTimeout(()=>{
					const index=Math.floor((e.detail.scrollTop+150)/550);
					this.index=index;
				},100);
			}
		}
	}
</script>

<style>
.qilin-followList{
	padding-top:120rpx;
	color:#fff;
	font-size:24rpx;
	height:100vh;
}
.qilin-followList-item{
	padding:20rpx;
}
.qilin-followList-item-info{
	display:flex;
	align-items:center;
	justify-content:space-between;
}
.qilin-followList-item-info-name{
	display:flex;
	align-items:center;
	padding:10rpx;
}
.qilin-followList-item-info-name>image{
	width:60rpx;
	height:60rpx;
	border-radius:50%;
}
.qilin-followList-item-info-name>text{
	margin-left:10rpx;
	font-size:24rpx;
}
.qilin-followList-item-ownText{
	padding:12rpx;
}
.qilin-followList-item-ownText>text{
	color:yellow;
}
.qilin-followList-item-video{
	width:100%;
	height:600rpx;
	padding:10rpx;
	position:relative;
}
/* .qilin-followList-item-video>video{
	width:80%;
	height:100%;
} */
.qilin-followList-item-video-music{
	position:absolute;
	left:5%;
	bottom:4%;
	z-index:1;
	display:flex;
	align-items:baseline;
}
.qilin-followList-item-video-music>icon{
	font-size:24rpx;
	/* line-height:3; */
}
.qilin-followList-item-video-music-text{
	width:200rpx;
	overflow:hidden;
	margin-left:10rpx;
}
.qilin-followList-item-video-music-text>view{
	width:auto;
	margin-left:10rpx;
	white-space:nowrap;
	animation:music 4s linear 0s infinite;
}
.qilin-followList-item-operate{
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding:12rpx;
}
.qilin-followList-item-operate-time{
	color:#666;
}
.qilin-followList-item-operate-items{
	display:flex;
	align-items:center;
	justify-content:space-between;
}
.qilin-followList-item-operate-items-icon{
	margin:0 15rpx;
}
.qilin-followList-item-operate-items-icon>text{
	margin-left:10rpx;
}
.qilin-follow-item-comment{
	padding:16rpx;
	background-color:#1f1e2c;
	border-radius:10rpx;
	margin:12rpx;
}
.qilin-follow-item-comment-number{
	color:#aaa;
	font-size:20rpx;
	padding-bottom:10rpx;
}
.qilin-follow-item-comment-content{
	height:200rpx;
	overflow-y:auto;
	pading:10rpx 0;
}
.qilin-follow-item-comment-input{
	padding-top:10rpx;
	position:relative;
}
.qilin-follow-item-comment-input>icon{
	position:absolute;
	left:0;
	top:0;
}
.qilin-follow-item-comment-input>input{
	margin-left:50rpx;
}


@keyframes music{
	0%{
		transform:translate3d(80%,0,0);
	}
	100%{
		transform:translate3d(-80%,0,0);
	}
}
</style>
